<template>
  <div class="content">
    <div class="index-header-box" id="head">
      <div class="index-header">
        <div @click="$router.back(-1)" class="back">
          <van-icon name="arrow-left"/>
        </div>
        <router-link :to="{name:'UserInfo'}" class="header-right">取消</router-link>

        <div class="title">用户信息</div>
      </div>
    </div>
    <div class="rel-public-title">
      <span class="txt">基础信息</span>
    </div>
    <van-field class="input" v-model="UserData.nickname" label="用户昵称" placeholder="输入昵称"  />
    <van-field class="input" v-model="columnsSex[UserData.sex]" label="性别" placeholder="请选择性别" @focus="changeSex = true"/>
    <van-popup v-model="changeSex" position="bottom" :overlay="true">
      <van-picker
        show-toolbar
        title="选择性别"
        :columns="columnsSex"
        :default-index="parseInt(UserData.sex)"
        @cancel="changeSex = false;"
        @confirm="onConfirm" />
    </van-popup>

    <van-field readonly clickable label="生日" v-model="upTimeString" placeholder="请选择生日" @click="TimePicker = true" />
    <van-popup v-model="TimePicker" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @cancel="TimePicker=false"
        @confirm="birthdayConfirm"
        :min-date="minDate"
        :formatter="formatter"
        />
    </van-popup>

    <div class="rel-public-title">
      <span class="txt">收款信息</span>
    </div>
    <van-field class="input" v-model="UserData.alipay_user" label="支付宝账号" placeholder="请输入支付宝收款账号" />
    <van-field class="input" v-model="UserData.wechat_user" label="微信账号" placeholder="请输入微信收款账号" />

    <div class="btn-box">
      <van-button type="info" class="btn-primary" @click="saveProfile">保   存</van-button>
    </div>



  </div>


</template>

<script>
  import storeJs from 'storejs'
  import { Dialog } from 'vant';

  export default {
    name: "invite_more",
    components: {},
    data() {
      return {
        upTimeString:"",
        upTimeInt:0,
        minDate: new Date('1900/1/1'),
        currentDate: new Date(),
        changeSex: false,
        birthdayPicker: false,
        TimePicker: false,
        UserData: {},
        columnsSex: ['保密', '男', '女'],
      }
    },
    computed: {},
    mounted: function () {
      this.UserData = this.isLogin();
      this.upTimeString = this.formatDate(this.UserData.birthday);
      this.currentDate = new Date(this.UserData.birthday*1000);
    },
    methods: {
      onConfirm(picker, value, index){
        this.UserData.sex = value;
        this.changeSex = false;
      },
      saveProfile(){
        let postData = {
          nickname:this.UserData.nickname,
          sex:this.UserData.sex,
          birthday:this.UserData.birthday,
          wechat_user:this.UserData.wechat_user,
          alipay_user:this.UserData.alipay_user,
        };
        this.$api.member.update({data:postData}).then(res=>{
          if(res.data.status == 0){
            Dialog.alert({
              message: res.data.msg
            }).then(() => {});
          } else {
            Dialog.alert({
              message: res.data.msg
            }).then(() => {
              storeJs.set('User',res.data.data);
              this.UserData = res.data.data;
              this.$router.replace({
                path: '/user_info',
                query: {
                  redirect: this.$router.currentRoute.fullPath
                }
              });
            });
          }
        });
      },
      birthdayConfirm(value){
        let y = value.getFullYear();
        let m = value.getMonth() + 1;
        let d = value.getDate();
        let timeStr = y+"/"+ m +"/"+d;
        this.UserData.birthday = new Date(timeStr).getTime()/1000;
        this.upTimeString = this.formatDate(this.UserData.birthday);
        this.TimePicker = false
      },
      formatter(type, value) {
        if (type === 'year') {
          return `${value}年`;
        } else if (type === 'month') {
          return `${value}月`
        } else if (type === 'day') {
          return `${value}日`
        }
        return value;
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/user.scss";
</style>
